<template>
    <div class="main_collection">
        <div class="main_collection_title">
            <div class="main_collection_title_1">我的收藏</div>
        </div>
        <div class="main_collection_for">
            <div v-for="item in collectList" :key="item.id">
                <div class="main_collection_for_item">
                    <div>
                        <router-link :to="{
            path: '/articleDetails',
            query: {
              articleId:item.articleId
            }
          }">
                            <div class="main_collection_for_item_title">{{ item.articles.title }}</div>
                        </router-link>
                    </div>
                    <div class="main_collection_for_item_labels">
                        <div v-for="item2 in item.articles.labels">
                            <a-button @click="labelSearch(item2)" class="main_collection_for_item_label" type="primary"
                                      size="small"
                                      ghost>{{ item2 }}
                            </a-button>
                        </div>
                        <div class="main_collection_for_item_createTime">收藏于&nbsp;&nbsp;{{ item.createTime }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {getUserCollectList, searchArticle} from "@/api/home/article";
// @ts-ignore
import cookie from 'js-cookie'
import {CollectBrowse} from "@/model/home/article";
import {RequestParams} from "@/model/home/answer";
import {useStore} from "@/store";
import router from "@/router";
// @ts-ignore
import Publish from 'pubsub-js'

//用户收藏列表
const collectList = ref<CollectBrowse[]>([])

//用户id
const userId = ref<number>(0)

//全文检索所需的参数
const requestParams = ref<RequestParams>({
    key: '',
    page: 1,
    size: 10,
    sortBy: ''
})

//标签搜索
const labelSearch = (tagName: string) => {
    requestParams.value.key = tagName
    Publish.publish('receiveTagName', tagName)
    router.push('/')
    // searchArticle(requestParams.value).then((res) => {
    //   const store = useStore()
    //   store.setKey(requestParams.value.key)
    //   const msg = []
    //   msg.push(res.data.data.pageResult.articles)
    //   msg.push(requestParams.value.key)
    //   msg.push(res.data.data.pageResult.total)
    //   Publish.publish('searchArticleList', msg)
    //   router.push('/')
    // })
}

//查询当前用户的收藏记录
const handleUserCollectList = async () => {
    const res = await getUserCollectList(userId.value)
    collectList.value = res.data.data.list
}

//从cookie中获取用户id
const getUserId = () => {
    if (cookie.get('userinfo') != null) {
        userId.value = JSON.parse(cookie.get('userinfo')).id
    } else {
        userId.value = 0
    }
}

getUserId()
handleUserCollectList()
</script>

<style lang="less" scoped>
.main_collection {
  overflow: scroll;
  height: 94vh;

  .main_collection_title {
    width: 220px;
    margin: auto;

    .main_collection_title_1 {
      text-align: center;
      font-size: 30px;
      font-weight: bold;
      border-radius: 25px;
      background-image: linear-gradient(to top, #d9afd9 0%, #97d9e1 100%);
    }
  }

  .main_collection_for {
    background-color: white;
    border-radius: 50px;
    padding-bottom: 20px;
    margin: 15px 10% 20px;

    .main_collection_for_item {
      margin-left: 30px;
      margin-right: 30px;
      padding: 10px;
      border-bottom: 1px solid #f0f0f0;

      .main_collection_for_item_title {
        font-size: 20px;
        font-weight: bold;
        //width: 120vh;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .main_collection_for_item_title:hover {
        color: red;
      }

      .main_collection_for_item_labels {
        display: flex;
        margin-top: 10px;

        .main_collection_for_item_label {
          margin-right: 20px;
        }

        .main_collection_for_item_createTime {
          margin-left: auto;
        }
      }
    }
  }
}
</style>